<template>
  <div id="panel">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="5" class="head-container">
        <tree-select v-model="deptName" @node-click="handleNodeClick" />
      </el-col>
      <!--用户数据-->
      <el-col :span="19" class="body-container">
        <el-card class="queryForm">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="100px"
          >
            <el-form-item label="监测时间">
              <el-date-picker
                v-model="dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="phonenumber">
              <!-- 空表单项，保留原结构 -->
            </el-form-item>
            <el-form-item label="监测项目" prop="status">
              <el-select
                v-model="jcxm"
                multiple
                collapse-tags
                style="margin-left: 20px"
                placeholder="请选择"
                @change="selectChange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否超标" prop="isoverstandard">
              <el-switch v-model="queryParams.isoverstandard"></el-switch>
            </el-form-item>
            <el-form-item label="整四点数据" prop="isitontimedata">
              <el-switch v-model="queryParams.isitontimedata"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                v-hasPermi="['system:user:export']"
                >导出</el-button
              >
            </el-col>
          </el-row> -->

          <el-table
            :data="tableList.rows"
            border
            style="width: 100%"
            :height="tableHeight"
          >
            <el-table-column type="index" label="序号" />
            <el-table-column prop="segmentname" label="断面名称" />
            <el-table-column
              prop="riverName"
              label="所属河流湖库"
              width="150"
            />
            <el-table-column prop="sampletime" label="监测时间" width="180" />
            <el-table-column prop="qualitylevelname" label="水质级别" />
            <el-table-column prop="province" label="是否达标">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.province == 0" type="success"
                  >是</el-tag
                >
                <el-tag v-else-if="1" type="danger">否</el-tag>
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="waterquality" label="水质评价" />
            <el-table-column
              show-overflow-tooltip
              prop="overstandarddescribe"
              label="超标描述"
            />
            <!-- 动态监测项目列 -->
            <el-table-column
              v-for="(item, index) in selArr"
              :key="index"
              :prop="item.val"
              :label="item.name"
              min-width="100"
            />
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getMonitorFactor } from "@/api/dataResources/common";
import { getJcDataList } from "@/api/dataResources/waterJcData/jcsection";
export default {
  name: "HydrologicStation",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: {
    TreeSelect: () =>
      import("@/views/dataResources/waterJcData/components/zdzTree"),
  },
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 300,
      value1: [],
      value2: [],
      // 部门名称
      deptName: undefined,
      // 监测项目下拉选项（接口返回后填充）
      options: [],
      // 监测项目选中值（v-model绑定，需默认全选）
      jcxm: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        isoverstandard: undefined,
        isitontimedata: undefined,
      },
      tableList: {
        total: 0,
        rows: [],
      },
      // 总条数
      total: 0,
      // 日期范围（默认最近三天）
      dateRange: [],
      // 选中数组（表格多选用，保留原结构）
      ids: [],
      // 动态表格列（监测项目列）
      selArr: [],
    };
  },
  watch: {},
  created() {
    // 1. 先获取监测因子数据
    this.getMonitorFactor();
  },
  mounted() {
    // 2. 初始化日期范围（最近三天）
    this.getLastThreeDaysRange();
  },
  methods: {
    // 页面初始化请求表格数据
    pageInit() {
      this.getList();
    },
    // 获取最近三天日期范围（开始时间-结束时间）
    getLastThreeDaysRange() {
      // 结束时间：今天（yyyy-MM-dd）
      const endTime = dayjs().format("YYYY-MM-DD");
      // 开始时间：三天前（包含今天共3天）
      const startTime = dayjs().subtract(2, "day").format("YYYY-MM-DD");
      this.dateRange = [startTime, endTime];
    },
    // 获取监测因子（核心改造：接口返回后默认全选）
    getMonitorFactor() {
      const query = {
        bussinessCategoryCode: "Auto",
      };
      getMonitorFactor(query)
        .then((res) => {
          // 1. 格式化下拉选项（value=eNName，label=itemName，与原代码逻辑一致）
          this.options = res.data.map((item) => ({
            value: item.eNName, // 下拉框value绑定eNName
            label: item.itemName, // 下拉框显示文本为itemName
            raw: item, // 保留原始数据（可选，便于后续使用）
          }));

          // 2. 默认全选：提取所有选项的value（eNName）赋值给jcxm
          this.jcxm = this.options.map((item) => item.value);

          // 3. 同步更新动态表格列（selArr）并加载表格数据
          this.selArr = this.selectedItems();
          // 确保日期范围已初始化后再请求数据
          if (this.dateRange.length > 0) {
            this.pageInit();
          }
        })
        .catch((error) => {
          this.$message.error("获取监测因子失败：" + error.message);
        });
    },
    // 监测因子下拉框变化时更新表格列
    selectChange(value) {
      this.selArr = this.selectedItems();
      this.getList();
    },
    // 树节点点击（选中断面）
    handleNodeClick(data) {
      console.log(">>>datasssss", data);

      this.queryParams.segmentid = data;
      this.handleQuery();
    },
    // 筛选节点（保留原方法，未使用）
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 格式化选中的监测项目为表格列结构（name=显示名，val=字段名）
    selectedItems() {
      return this.jcxm.map((value) => {
        // 根据选中的value（eNName）匹配对应的选项
        const matchedOption = this.options.find(
          (option) => option.value === value
        );
        // 匹配成功则返回表格列结构，失败则兜底（避免报错）
        return matchedOption
          ? {
              name: matchedOption.label, // 表格列标题（监测项目名）
              val: matchedOption.value, // 表格列绑定的字段（eNName）
            }
          : { name: value, val: value };
      });
    },
    // 分页-每页条数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 分页-当前页变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置（核心改造：重置后仍默认全选监测项目）
    resetQuery() {
      // 1. 重置日期范围（恢复最近三天）
      this.getLastThreeDaysRange();
      // 2. 重置查询参数（保留分页参数）
      this.queryParams = {
        ...this.queryParams,
        isoverstandard: undefined,
        isitontimedata: undefined,
        segmentid: undefined,
      };
      // 3. 重置部门选择
      this.deptName = undefined;
      // 4. 关键：重置后仍保持监测项目全选
      this.jcxm = this.options.map((item) => item.value);
      this.selArr = this.selectedItems();
      // 5. 重置表单验证
      if (this.$refs.queryForm) {
        this.$refs.queryForm.resetFields();
      }
      // 6. 重新加载数据
      this.getList();
    },
    // 导出（保留原结构，未实现）
    handleExport() {},
    // 获取表格数据（保留原逻辑）
    getList() {
      const query = JSON.parse(JSON.stringify(this.queryParams));
      // 补充日期范围参数
      if (this.dateRange.length > 0) {
        query.startTime = this.dateRange[0];
        query.endTime = this.dateRange[1];
      } else {
        query.startTime = "";
        query.endTime = "";
      }
      if (this.queryParams.isoverstandard) {
        query.isoverstandard = "1";
      } else {
        query.isoverstandard = "0";
      }
      if (this.queryParams.isitontimedata) {
        query.isitontimedata = "1";
      } else {
        query.isitontimedata = "0";
      }
      // 补充选中的监测项目参数（如果接口需要）
      // query.monitorItems = this.jcxm.join(','); // 根据接口需求决定是否添加

      getJcDataList(query)
        .then((res) => {
          this.tableList.total = res.total;
          this.tableList.rows = res.rows;
          this.total = res.total; // 同步总条数（ pagination 组件用）
        })
        .catch((error) => {
          this.$message.error("获取监测数据失败：" + error.message);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 40px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 控制分页的样式----二次开发
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  // 控制分页刷新按钮样式
  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 20px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 200px;
    }

    .searchBtnBox {
      display: inline-block;
      margin: 10px 0 10px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}
</style>
